<!-- 列表高度 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="列表高度" name="1">
            <div class="row-wrap">
                <div class="left-wrap">选择设置类型</div>
                <div class="right-wrap" style="flex: 1;">
                    <el-select
                        v-model="vesselAutoheight"
                        placeholder="请选择设置类型"
                    >
                        <el-option
                            v-for="(item, index) in vesselAutoheightList"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>

            <template v-if="[0, 1].includes(vesselAutoheight)">
                <div class="row-wrap">
                    <div class="left-wrap">每次加载数据条数</div>
                    <div class="right-wrap">
                        <si-input-number
                            v-model="widget.widgetData.eles.customFeature.loadingNum"
                            :min="0"
                        />
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="row-wrap">
                    <div class="left-wrap">当前列表仅展示</div>
                    <div class="right-wrap">
                        <si-input-number
                            v-model="widget.widgetData.eles.customFeature.loadingNum"
                            :min="0"
                        />
                    </div>
                    <div class="right-wrap" style="margin-left: 10px;">
                        条数据
                    </div>
                </div>
            </template>

            <template v-if="[0].includes(vesselAutoheight)">
                <div class="row-wrap">
                    <div class="left-wrap">列表高度设置为</div>
                    <div class="right-wrap">
                        <si-input-number
                            v-model="widget.widgetData.eles.customFeature.height"
                            :min="0"
                            unit="px"
                        />
                    </div>
                </div>
            </template>

            <template v-if="[0, 1].includes(vesselAutoheight)">
                <el-divider></el-divider>
                <layout-pane label="加载">
                    <el-radio-group v-model="loadingMethod">
                        <el-radio :label="1">点击加载</el-radio>
                        <el-radio v-if="vesselAutoheight === 0" :label="0">滚动加载</el-radio>
                    </el-radio-group>

                    <template v-if="loadingMethod === 0">
                        <!-- <div class="tip-txt">*注：使用高度自适应的滚动加载，组件必须放置于页面底部，才能有滚动加载效果</div> -->
                    </template>
                    <template v-else-if="loadingMethod === 1">
                        <div class="row-wrap" style="margin-top: 10px;">
                            <div class="left-wrap">按钮样式：</div>
                            <div class="right-wrap">
                                <el-radio-group v-model="loadingStyle">
                                    <el-radio label="img">图片</el-radio>
                                    <el-radio label="text">文字</el-radio>
                                </el-radio-group>
                            </div>
                        </div>

                        <template v-if="loadingStyle === 'img'">
                            <si-image-picker
                                v-model="widget.widgetData.eles.customFeature.loadingImg"
                                type="image"
                                label="按钮图片"
                                :size="70"
                                style="margin-top: 10px;"
                            />
                        </template>
                        <template v-else-if="loadingStyle === 'text'">
                            <div class="row-wrap" style="margin-top: 10px;">
                                <div class="left-wrap">内容</div>
                                <div class="right-wrap" style="flex: 1;">
                                    <el-input v-model="loadingText" placeholder="请输入加载文字" style="width: 120px;" />
                                </div>
                            </div>
                            <si-color-picker
                                v-model="widget.widgetData.eles.customFeature.loadingColor"
                                label="颜色"
                                show-alpha
                                style="margin-top: 10px;"
                            />
                        </template>
                    </template>
                </layout-pane>
            </template>

            <el-divider></el-divider>
            <layout-pane label="数据加载完毕文案提示">
                <el-switch v-model="widget.widgetData.eles.customFeature.isShowFinishText" />
            </layout-pane>
            
            <!-- <template v-if="[0, 1].includes(vesselAutoheight)">
                <el-divider></el-divider>
                <div class="row-wrap">
                    <div class="left-wrap">数据加载完毕文案提示</div>
                    <div class="right-wrap">
                        <el-switch v-model="widget.widgetData.eles.customFeature.isShowFinishText" />
                    </div>
                </div>
            </template> -->
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiInputNumber,
    SiImagePicker,
    SiColorPicker
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'RowListHeight',
    components: {
        LayoutPane,
        SiInputNumber,
        SiImagePicker,
        SiColorPicker
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const vesselAutoheightList = [
            { label: '自定义高度', value: 0 },
            { label: '自适应高度', value: 1 },
            { label: '自定义条数', value: 2 }
        ]

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)
        const vesselAutoheight = computed({
            get: () => widget.value.widgetData.eles.customFeature.vesselAutoheight,
            set: val => {
                widget.value.widgetData.eles.customFeature.vesselAutoheight = val
                if ([0, 1].includes(val)) {
                    if (val === 1) loadingMethod.value = 1
                    widget.value.widgetData.eles.customFeature.loadingNum = 10
                } else {
                    widget.value.widgetData.eles.customFeature.loadingNum = 4
                }
            }
        })
        const loadingMethod = computed({
            get: () => widget.value.widgetData.eles.customFeature.loadingMethod,
            set: val => {
                widget.value.widgetData.eles.customFeature.loadingMethod = val
            }
        })
        const loadingStyle = computed({
            get: () => widget.value.widgetData.eles.customFeature.loadingStyle,
            set: val => {
                widget.value.widgetData.eles.customFeature.loadingStyle = val
            }
        })
        const loadingText = computed({
            get: () => widget.value.widgetData.eles.customFeature.loadingText,
            set: val => {
                widget.value.widgetData.eles.customFeature.loadingText = val
            }
        })

        return {
            widget,
            widgetType,
            vesselAutoheightList,
            vesselAutoheight,
            loadingMethod,
            loadingStyle,
            loadingText
        }
    }
})
</script>

<style lang="less" scoped>
.row-wrap {
    display: flex;
    align-items: center;
    & + .row-wrap {
        margin-top: 20px;
    }
    .left-wrap {
        margin-right: 10px;
    }
    .right-wrap {
        // 
    }
}
.tip-txt {
    color: var(--edit-color-info);
}
</style>